<template>
	<view class="content">
		<!-- 	<view class="upload-image-item" @click="chooseImage()">
			<view class="uploadBtn">
				<uni-icons type="plusempty" size="40" color="rgba(0, 0, 0, 0.65)"></uni-icons>
				<view>添加图片</view>
			</view>
		</view>
		<view class="">
			<img v-if="formData.url" :src="formData.url" style="width: 250rpx; height: 250rpx;margin-left:240rpx"
				alt="">
		</view> -->
		<view class="body-information">
			<view class="box">
				<uni-section title="填写评价" type="line" padding>
					<uni-rate v-model="score" @change="onChange" margin="30" />
				</uni-section>
			</view>
		</view>
		<view class="conts">
			<textarea class="areas" placeholder='更多评价请写在这里（最多300字）' v-model="formData.message" minlength="{{min}}"
				maxlength="{{max}}" bindinput="inputs">
		    </textarea>
		</view>
		<view class="subButton" @click="submit">
			<text>提交评价</text>
		</view>
	</view>
</template>
<script>
	import {
		comment
	} from '@/api/index'
	import {
		baseUrl
	} from '@/util/config'
	export default {
		data() {
			return {
				type: 0,
				formData: {
					commentOn: '',
					message: '',
					score: '',
					status: 1,
					wechatUserId: ''
				},
				orderId: ''
			};
		},
		onLoad(options) {
			console.log(options);
			this.orderId = options.orderId
			this.type = options.type
			options.type == 1 ? this.formData.commentOn = options.courierId : this.formData.commentOn = options
				.freightDriverId
			this.formData.wechatUserId = options.wechatUserId

		},
		methods: {
			onChange(e) {
				this.formData.score = e.value;
			},
			chooseImage(tempFilePaths) {
				uni.chooseImage({
					count: 3, // 默认9，设置图片的数量
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						console.log("选择的图片", tempFilePaths)
						// 上传图片到服务器
						this.uploadImage(tempFilePaths[0]);
					},
					fail: (err) => {
						console.log('选择图片失败', err);
					}
				});
			},
			uploadImage(filepath) {
				let _this = this;
				console.log('图片路径', filepath)
				let token = uni.getStorageSync('X-Access-Token')
				const file = filepath
				const formData = {
					folder: 'drive'
				}
				uni.showLoading({
					title: '上传中'
				});
				uni.uploadFile({
					url: baseUrl + '/oss/upload', // 接口地址
					header: {
						'Authorization': uni.getStorageSync('X-Access-Token'),
						'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
						'Content-Disposition': 'form-data'
					},
					filePath: file, // 文件路径（可选）
					name: 'file', // 后台服务器接收文件的字段名
					formData: formData, // 传递的额外数据
					success: (res) => {
						uni.hideLoading();
						uni.showToast({
							title: '上传成功',
							duration: 1000,
							icon: 'none'
						});
						this.formData.url = JSON.parse(res.data).fileName
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: '上传失败,请重试',
							duration: 1000,
							icon: 'none'
						});
						console.error(err, "上传失败");
					},
				});
			},
			submit() {
				let params = {
					orderId: this.orderId,
					commentOn: this.formData.commentOn,
					message: this.formData.message,
					score: this.formData.score,
					createBy: this.formData.wechatUserId,
					status: this.type,
				}
				comment(params, 'post')
					.then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'none',
								duration: 1000
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1000,
							})
						}
					})
				uni.navigateBack({
					delta: 1 // 返回的页面数
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.subButton {
		height: 80rpx;
		border-radius: 15rpx;
		background: #FFCC00;
		text-align: center;
		display: flex;
		align-items: center;
		color: #444444;
		font-weight: bold;
		width: 600rpx;
		position: fixed;
		left: 75rpx;
		bottom: 37rpx;
		justify-content: center;
	}

	.class1 {

		height: 80rpx;
		width: 700rpx;
		align-items: center;
		margin: 20rpx auto;
		display: flex;
		border: 1rpx solid #FFCC00;
		background: white;
		border-radius: 20rpx;
		box-shadow: 5px 5px 10px rgb(227, 242, 204);
		font-size: 30rpx;
	}

	.text-aree {
		border: 2rpx soild red;
		padding: 5rpx;
		margin: 10rpx;
	}

	.body-information {
		display: flex;
		width: 700rpx;
		margin: 20rpx auto;
		border: 1rpx solid #eee;
		background: white;
		border-radius: 25rpx;
		box-shadow: 5px 5px 10px rgb(227, 242, 204);
		font-size: 30rpx;

		.box {
			width: 96%;
			background-color: #fff;
			border-radius: 10rpx;
			margin: 20rpx auto;
			box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 8%);
		}
	}

	.upload-image-item {
		// width: 33.33%;
		margin: 20rpx;
		position: relative;
		height: 130px;
		box-sizing: border-box;
		border-radius: 25rpx;

		.image-box {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 5px;
			right: 0px;
			bottom: 5px;
			left: 0px;
			border: 1px solid rgba(0, 0, 0, 0.15);
			padding: 8px 7px 7px 8px;
			border-radius: 2px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.uploadBtn {
		height: 100%;
		background-color: rgba(0, 0, 0, .04);
		border: 1px solid rgba(0, 0, 0, .15);
		border-radius: 2px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 100%;
			height: 100%;
		}

	}

	.conts {
		width: 100%;
		height: auto;
		background: #fff;
	}

	textarea {
		width: 687rpx;
	}

	.areas {
		height: 315rpx;
		font-size: 30rpx;
		padding-top: 30rpx;
		margin: 0 auto;
		overflow: hidden;
		position: relative;
	}
</style>